<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>full-width-image</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body,html {
            height: 100%;
            background: linear-gradient(135deg,#ebb297 10%,#e25706 90%);
        }
        .main {
            max-width: 640px;
            margin: 0 auto;
            background: linear-gradient(135deg,#97c1eb 10%,#0674e2 90%);
            color: #fff;
            padding: 15px;
        }
        .image {
            height: auto;
            max-width: 100%;
        }
        .full-width {
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            max-width: 100vw;
            width: 100vw;
        }
    </style>
</head>

<body>
    <main class="main">
        <h4>Lorem ipsum dolor sit amet</h4>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
            lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
            ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
            eu, faucibus interdum felis.
        </p>
        <p>
            <img class="full-width image" src="https://picsum.photos/id/257/2560/1440.jpg" />
        </p>
        <p>
            Orci varius natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
            gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
            eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
            Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
        </p>
    </main>
</body>

</html>